<!--
 * @Author: pjji
 * @describe: 公共头部
 * @LastEditTime: 2020-12-03 16:16:43
-->
<template>
	<div class="layout-header ">
		<div class="logo f-ib f-vam f-tar">
			<span class="f-ib f-vam f-pdg-20-l">
				<img :src="logo"
					 alt="">
			</span>
		</div>
		<div class="title f-ib f-vam">
			Manager Admin
		</div>
		<div 
			 class="top-bar f-fr">
			<p class="f-ib f-vam" v-if="userInfo.name">Hi，{{ userInfo.name }} </p>
			<div class="logout-btn f-ib f-vam"
				 @click="logOut"><i class="el-icon-switch-button"></i>
			</div>
		</div>
	</div>
</template>

<script>
import _ from "lodash";
export default {
	props: {
		userInfo: {
			type: Object,
			default: () => { return { name: "登录人" } }
		}
	},
	data () {
		return {
			logo: require('../../assets/images/icon.png')
		}
	},
	methods: {
		logOut () {
			this.$emit('logOut')
		}
	}
}
</script>

<style lang="scss">
.layout-header {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
	user-select: none;
	width: 100%;
	height: $headerHeight;
	background: #323bf5;
	background: linear-gradient(to right, #323bf5 0%, #35d1ce 20%, #2ab1e8 100%);
        // background: linear-gradient(to right, #2ab1e8, #35d1ce);
	color: $content-bg;
	.logo {
		height: 100%;
		font-size: 50px;
		line-height: 56px;
		img {
			display: block;
			width: 30px;
		}
	}
	.title {
		padding-left: 20px;
		font-size: 20px;
	}
	.top-bar {
		padding-right: 30px;
		padding-top: 22px;
		font-size: 14px;

		.logout-btn {
			margin:2px 0 0 20px;
			cursor: pointer;
		}
	}
}
</style>
